<template>
  <el-card>
    <el-row :gutter="20" style="padding-bottom: 15px">
      <div class="login-title">商品名称：</div>
      <el-col :span="5">
        <el-input placeholder="请输入商品名称"></el-input>
      </el-col>
      <el-button type="primary" icon="Search">搜索</el-button>
    </el-row>
    <!-- 用户列表 -->
    <el-table
      stripe
      :header-cell-style="{
        background: '#FAFAFA',
        color: '#000',
      }"
      :data="proUserList"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="id" label="ID" width="50" align="center" />
      <el-table-column
        prop="order_id"
        label="订单ID"
        width="200"
        align="center"
      />
      <el-table-column
        prop="goods_info.goods_id"
        label="用户id"
        width="300"
        align="center"
      />
      <el-table-column width="100" align="center" label="商品图">
        <template #default="{ row }">
          <el-avatar :src="row.goods_info.goods_images" />
        </template>
      </el-table-column>
      <el-table-column
        prop="goods_info.goods_name"
        label="商品名称"
        width="300"
        align="center"
      />
      <el-table-column
        prop="goods_info.goods_price"
        label="商品售价"
        width="120"
        align="center"
      />
      <el-table-column
        prop="goods_info.goods_styles"
        label="商品款式"
        width="200"
        align="center"
      />
      <el-table-column prop="num" label="下单数" width="80" align="center" />
      <el-table-column
        prop="order_time"
        label="下单时间"
        width="200"
        align="center"
      />
      <el-table-column width="120" align="center" label="订单状态">
        <template #default="{ row }">
          <div v-if="row.status == 0">订单已过期</div>
          <div v-else-if="row.status == 1">未支付</div>
          <div v-else-if="row.status == 2">待发货</div>
          <div v-else-if="row.status == 3">待收货</div>
          <div v-else-if="row.status == 4">待评价</div>
          <div v-else>售后中</div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="250">
        <template #default="{ row }">
          <el-button link type="primary" size="large">
            <el-icon><EditPen /></el-icon>查看
          </el-button>
          <el-button @click="editOrder(row)" link type="success" size="large">
            <el-icon><Delete /></el-icon>编辑
          </el-button>
          <el-button @click="orderInfo(row)" link type="primary" size="large">
            <el-icon><CopyDocument /></el-icon>订单详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改订单 -->
    <el-dialog
      v-model="centerDialogVisible"
      title="修改订单"
      width="30%"
      align-center
    >
      <el-form :model="updateOrder">
        <el-form-item label="订单编号">
          <el-input disabled v-model="updateOrder.order_id" />
        </el-form-item>
        <el-form-item label="商品总价">
          <el-col :span="5">
            <el-input disabled v-model="updateOrder.price" />
          </el-col>
        </el-form-item>
        <el-form-item label="商品数量">
          <el-col :span="5"
            ><el-input disabled v-model="updateOrder.num"
          /></el-col>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-col :span="10">
            <el-select v-model="updateOrder.status" placeholder="订单状态">
              <el-option label="订单已过期" value="0" />
              <el-option label="订单未付款" value="1" />
              <el-option label="订单已付款" value="2" />
              <el-option label="商品发货" value="3" />
              <el-option label="商品送达" value="4" />
              <el-option label="售后中" value="5" />
            </el-select>
          </el-col>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveOrder"> 保存修改 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 订单详情 -->
    <el-drawer
      :with-header="false"
      v-model="isDrawer"
      direction="rtl"
      size="35%"
    >
      <div class="drawer-header">
        <div class="icon" @click="close">
          <el-icon><Close /></el-icon>
        </div>
        <div class="title">订单详情</div>
      </div>
      <div class="drawer-info">
        <div class="drawer-info-item">订单ID： {{ ordersInfo.order_id }}</div>
        <div class="drawer-info-item">订单状态：{{ ordersInfo.status }}</div>
        <div class="drawer-info-item">用户ID：{{ ordersInfo.user_id }}</div>
        <div class="drawer-info-item">商品总数：{{ ordersInfo.num }}</div>
        <div class="drawer-info-item">
          商品ID：{{ ordersInfo.goods_info.goods_id }}
        </div>
        <div class="drawer-info-item">商品总价：{{ ordersInfo.price }}</div>
        <div class="drawer-info-item">
          下单时间：{{ ordersInfo.order_time }}
        </div>
        <div class="drawer-info-item">
          商品名称：{{ ordersInfo.goods_info.goods_name }}
        </div>
        <div class="drawer-info-item">
          商品款式：{{ ordersInfo.goods_info.goods_styles }}
        </div>
      </div>
    </el-drawer>
    <!-- 分页 -->
    <div class="paginate-div">
      <el-pagination
        v-model:current-page="query.page"
        v-model:page-size="query.limit"
        :page-sizes="[1, 2, 5, 10]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
  <Config></Config>
</template>
  
  <script setup>
import orderApi from "@/request/apis/orders.js";
import { ElNotification } from "element-plus";
import { onMounted, ref } from "vue";
import { EditPen, Delete, CopyDocument, Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();

const query = ref({
  page: 1,
  limit: 10,
});

const total = ref(0);

const proUserList = ref([]);
const goodsInfo = ref([]);

const getUsers = () => {
  orderApi.orders(query.value.page, query.value.limit).then((res) => {
    proUserList.value = res.result.data_liat;
    total.value = res.result.total;
  });
};

const handleSizeChange = (pageSize) => {
  query.value.limit = pageSize;
  getUsers();
};

const handleCurrentChange = (pageNum) => {
  query.value.page = pageNum;
  getUsers();
};

const centerDialogVisible = ref(false);
const updateOrder = ref("");
// 修改订单
const editOrder = (row) => {
  centerDialogVisible.value = true;
  updateOrder.value = row;
};
// 保存修改订单
const saveOrder = () => {
  centerDialogVisible.value = false;
  orderApi
    .update(updateOrder.value.key_id, updateOrder.value.status)
    .then((res) => {
      if (res.code == 200) {
        ElNotification({
          title: "成功",
          message: res.result,
          type: "success",
        });
        setTimeout(() => {
          location.reload();
        }, 1000);
      } else {
        ElNotification({
          title: "失败",
          message: res.message,
          type: "error",
        });
        setTimeout(() => {
          location.reload();
        }, 1000);
      }
    });
};

const isDrawer = ref(false);
const ordersInfo = ref("");
// 订单详情
const orderInfo = (row) => {
  isDrawer.value = true;
  ordersInfo.value = row;
};

onMounted(() => {
  getUsers();
});
</script>
  
  <style scoped>
.login-title {
  font-size: 14px;
  color: #606266;
  line-height: 32px;
  margin-left: 15px;
}

.paginate-div {
  margin-top: 25px;
  width: 100%;
  height: 50px;
  display: flex;
  align-content: center;
  justify-content: center;
}

.drawer-header {
  position: relative;
  height: 40px;
  color: #000000d9;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 2px 2px 0 0;
  display: flex;
}

.drawer-header .icon {
  cursor: pointer;
  margin-top: 3px;
  margin-right: 10px;
}

.drawer-header .title {
  font-size: 16px;
}

.drawer-info {
  width: 100%;
  height: 280px;
  float: left;
  display: flex;
  flex-wrap: wrap;
}

.drawer-info .drawer-info-item {
  margin: 10px 0;
  width: 50%;
  height: 20px;
  /* display: flex; */
  font-size: 12px;
}
</style>